<template>
    <div class="commentlist">
                <div class="title" style="background: #F5F7FA;"><span>评论</span></div>
                <div class="comment" v-for="(user1,index) in list1" :key="index">
                    <div class="commentinfo">
                        <div class="commentinformation">
                            <img v-bind:src="user1.img" class="user_image" style="height: 100%; width: 100%;">
                        </div>
                        <div class="commentinformation">
							<div> 用户名：</div>
							<div>  {{user1.userName}}</div>
                        </div>
						<div class="commentinfo2">
                        {{user1.comText}}
                  		</div>
						<div class="commentinformation2">
							<i class="el-icon-share" style="display: flex;flex-direction: column-reverse;"></i>
							<i class="el-icon-s-promotion" style="display: flex;flex-direction: column-reverse;"></i>
							<i class="el-icon-star-off" style="display: flex;flex-direction: column-reverse;"></i>
						</div>
                    </div>
                    <div class="commentinfo1">
                        {{user1.createTime}}
                    </div>
                   
                </div>
    </div>
</template>
<script>
import CommentsApi from "@/api/apiLiu/Comments_request"
export default {
	data() {
		return {
            list1: [],
			searchMap1: {
				comId: null,
				userId: null,
				hotelId: 1,
				comText: null,
				createTime: null,
				updateTime: null,
				status: null,
				userId: null,
                userName:null,
			},
			count: 20,
            pojo1: {
				comId: null,
				userId: null,
				hotelId: null,
				comText: null,
				createTime: null,
				updateTime: null,
				status: null,
				userId: null,
                userName:null,
			},
			dialogFormVisible: false,
			dialogFormVisibleTwo: false,
			id: '',
			// list: [],
			// searchMap: {
			// 	com_id: null,
			// 	user_id: null,
			// 	hotel_id: null,
			// 	com_text: null,
			// 	create_time: null,
			// 	update_time: null,
			// 	status: null,
			// 	pageNum: 1,
			// 	pageSize: 7,
			// },
			// pojo: {
			// 	com_id: null,
			// 	user_id: null,
			// 	hotel_id: null,
			// 	com_text: null,
			// 	create_time: null,
			// 	update_time: null,
			// 	status: null,

			// },
		}
	},
	created() {
		//在创建vue实例后触发初始化钩子函数7
		this.fetchData1();
		
		// this.fetchData();
		// console.log(this.list1);
	},
	methods: {
		// add(){
        //     const user ={
		// 		com_id: null,
		// 		user_id: null,
		// 		hotel_id: null,
		// 		img:null,
		// 		com_text: null,
		// 		create_time: null,
		// 		update_time: null,
		// 		status: null,
		// 		user_name:null,
		// 		pageNum: 1,
		// 		pageSize: 1,
        //     }
        //     this.list.unshift(user)
        // },
		add1(){
            const user1 ={
				com_id: null,
				user_id: null,
				hotel_id: null,
				img:null,
				com_text: null,
				create_time: null,
				update_time: null,
				status: null,
				user_name:null,
				pageNum: 1,
				pageSize: 1,
            }
            this.list1.unshift(user1)
        },
    open(record,type){
        console.log(record,type);
    },
	fetchData1() {
		//编写一个方法请求后端的接口，把返回的数据赋值list
		CommentsApi.connect(this.searchMap1.hotelId).then(response => {
			//  //把返回的结果赋值模型
			this.list1 = response.data.data
		
		})
	},
	// fetchData() {
	// 	//编写一个方法请求后端的接口，把返回的数据赋值list
	// 	CommentsApi.selectList(this.searchMap).then(response => {
	// 		//  //把返回的结果赋值模型
	// 		this.list = response.data.data

	// 	})
	// },
	//当分页大小产生变化的时候调用该方法
	sizeData(size) {
		this.searchMap.pageSize = size
		this.fetchData()
	},
	pageData(page) {
		this.searchMap.pageNum = page
		this.fetchData()
	},
	//新增和修改使用同一个函数打开弹窗，区别是新增没有id
	handleEdit(id) {
		this.id = id
		//打开弹窗
		this.dialogFormVisible = true
		if (id !== '') {
			//根据id查询数据绑定到模型上面
			CommentsApi.selectByCom_id(id).then(reponse => {
				this.pojo=reponse.data.data;
			})
		} else {
			this.pojo = {
				com_id: null,
				user_id: null,
				hotel_id: null,
				com_text: null,
				create_time: null,
				update_time: null,
				status: null,
                user_name:null,
			} //清空数据
		}
	},
	//新增和修改保存数据的方法
	handleSave() {
		if (this.id === null || this.id === '') {
			CommentsApi.insert(this.pojo).then(reponse => {
				this.$message({
					message: reponse.data.msg,
					type: 'success'
				})
				//重新加载列表数据
				this.fetchData()
				//关闭弹窗
				this.dialogFormVisible = false
			})
		} else {
			CommentsApi.insertOrUpdate(this.pojo).then(reponse => {
				//新增或者修改成功
				this.$message({
					message: reponse.data.msg,
					type: 'success'
				})
				//重新加载列表数据
				this.fetchData()
				//关闭弹窗
				this.dialogFormVisible = false

			})
		}
	},
	handleDelete(id) {
		this.$confirm('您确定要删除吗?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			CommentsApi.deleteByCom_id(id).then(reponse => {
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
				this.fetchData()
			})
		}).catch(() => {
			this.$message({
				type: 'info',
				message: '已取消删除'
			});
		});
	}
}
}

</script>
<style>
.commentlist{
	width: 100%;	
	display: flex;
	flex-direction: column;
}
.comment{
	width: 100%;
	background: white;
	display: flex;
	flex-direction:column;
	border-top:1px solid black;
	border-bottom:1px solid black;
}
.commentinfo{
	width: 100%;

	display: flex;
	flex-direction: row;
	border-top:1px solid black;
	border-bottom:1px solid black;
}
.commentinfo1{
	width: 100%;
	font-size: 15px;
	display: flex;
	flex-direction: row;
	border-top:1px solid black;
	border-bottom:1px solid black;
}
.commentinfo2{
	width: 100%;
	display: flex;
	flex-direction: row;
	font-size: 20px;
	background: #F3F3F6;
}
.commentinformation{
	width: 25%;
	font-size: 20px;
	display: flex;
	flex-direction: column;
	border-right:1px solid black ;
}
.user_image{
	width: 100%;
	height: 100%;
}
.commentinformation2{
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	background: #F3F3F6;
}	
</style>